<template>
    <div>
        <div v-show="isShow" class="already-up-data">
            <div class="content">
                <div v-html="meassage"></div>
                <img class="qrcode-img" :src="mroQrCodeIcon">
            </div>
            <a @click.stop="sure" class="sure">知道了</a>
        </div>
        <van-overlay :show="overlayShow" @click="hideOverlay" />
    </div>
</template>

<script>
// 本地图片
import mroQrCode from '_assets/img/MRObijiQrCode.jpg'
// 自定义方法
import { getProImg } from "_projectFn/images"

// UI组件
import { Overlay } from "vant"

import Vue from 'vue'

Vue.use(Overlay)

export default {
    name: 'AlreadyUpDataWindow',
    props: {
        isShow: {
            type: Boolean,
            default: false,
        },
        meassage: {
            type: String,
            default: '下次列表更新即可显示您的信息！<br/>关注微信公众号，可收到最新通知！',
        },
    },
    data() {
        return {
            mroQrCodeIcon: getProImg('MRObijiQrCode.jpg', mroQrCode),
            overlayShow: false,
        }
    },
    methods: {
        sure() {
            this.overlayShow = false
            this.$emit("closeWindow")
            // this.$emit("showBindWechat")
        },
        hideOverlay() {
            this.overlayShow = false
            this.$emit("closeWindow")
        }
    },
    watch: {
        isShow() {
            if (this.isShow) {
                this.overlayShow = true
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.already-up-data {
    position: fixed;
    width: 290px;
    background: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;

    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        color: #333333;
        text-align: center;

        .qrcode-img {
            width: 160px;
            margin-top: 20px;
        }
    }

    .sure {
        display: flex;
        width: 100%;
        height: 50px;
        color: white;
        background: #0077bf;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        &:active {
            background: #024670;
        }
    }
}
</style>